<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        $(function () {
            //给username绑定blur事件
           $("#username").blur(function(){
               //获取username文本框中的值
               var username = $(this).val();
               //发送ajax请求
               //期望服务器响应的数据格式是json:{"userExist":true,"msg":"用户名已被注册"} -- 存在
               //                             {"userExist":false,"mas":"用户名可用"}
               $.get("findUserServlet",{username:username},function (data) {
                   //alert(data);
                   var span = $("#s_username");
                   //判断userExist键的值是否是true
                   if(data.userExist){
                        //用户名存在
                       span.css("color","red");
                       span.html(data.msg);
                   }else{
                       //用户名不存在
                       span.css("color","green");
                       span.html(data.msg);
                   }
               }/*,"json"*/);
           });
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <span id="s_username"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>
    </form>
</body>
</html>